<template>
    <div class="app-list">
        <div class="app-list-top">系统通知</div>
        <div class="app-list-items" ref="appListRef" @scroll="onScroll">
            <template v-if="appMsgList.length">
                <div v-for="item in appMsgList" :key="item.id" :class="['item', { 'item-text': item.type === 0 }]" @click="emit('handleMsg', item)">
                    <div class="item-time">{{ item.sendTime }}</div>
                    <template v-if="item.type === 6">
                        <div class="item-info">
                            <div class="name">{{ item.title }}</div>
                            <div class="img">
                                <img :src="item.coverUrl" alt="">
                            </div>
                            <div class="content line-2">{{ item.intro || '-' }}</div>
                            <div class="detail">查看详情</div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="item-info no-hover" v-dompurify-html="item.content"></div>
                    </template>
                </div>
            </template>
            <template v-else>
                <a-empty></a-empty>
            </template>
        </div>
        <i class="EachApp EachApp_fanhuidibu back-bottom flex" @click="appListRef?.scrollTo({ top: appListRef.scrollHeight, behavior: 'smooth' })" v-if="isBottom"></i>
    </div>
</template>
<script lang="ts" setup>
import type { SystemDetailEntity } from '@/entity/im/ImEntity';

const props = defineProps({
    systemInfo: { type: Object, default: () => { return {} } }
})
import * as ApiMsg from '@/api/im';
const emit = defineEmits(['handleMsg']);
interface appMsgInfoInterface {
    isLast: boolean; // 是否到底
    cursor: number; // 游标
}
const appMsgInfo = ref<appMsgInfoInterface>({
    isLast: true, // 是否到底
    cursor: 0, // 游标
}); // 全部信息
const appMsgList = ref<SystemDetailEntity[]>([]); // 列表
const appListRef = ref<HTMLElement | null>(null);
const isBottom = ref(false); // 是否到底
// Constants
const SCROLL_BOTTOM_THRESHOLD = 300;
const SCROLL_TOP_THRESHOLD = 100;

watch(() => props.systemInfo, e => {
    // console.log('静态新增消息===', {...e});
    if(e?.messageType === "SYSTEM_MESSAGE"){
        if(e?.isCurrent){
            appMsgList.value.push(e.lastMsg);
            scrollToBottom();
        }
        if(e?.unread > 0){
            nextTick(() => {
                getListRead();
            })
        }
    }
}, { deep: true, immediate: true })
onMounted(async () => {
    await getList();
    scrollToBottom();
})
// 应用消息列表
const getList = async (id: number = 0) => {
    appMsgInfo.value.isLast = true;
    try{
        const res = await ApiMsg.ApiNewsList({ id: id || null });
        if (res) {
            appMsgInfo.value = res;
            if (res.data) {
                appMsgList.value = [...res.data.reverse(),...res.data.reverse(),...res.data.reverse(), ...appMsgList.value];
            }
        }
    }catch(err){console.log(err);}
}

// 应用消息列表
const getListRead = async () => {
    try{
        await ApiMsg.ApiNewsListRead();
        // setChatList(imStore.chatList);
    }catch(err){console.log(err);}
}

// 上拉加载
const onScroll = (): void => {
    nextTick(() => {
        const container = appListRef.value;
        if (!container) return;
        const scrollDistanceFromBottom = container.scrollHeight - (container.scrollTop + container.clientHeight);
        isBottom.value = scrollDistanceFromBottom > SCROLL_BOTTOM_THRESHOLD;

        if (container.scrollTop <= SCROLL_TOP_THRESHOLD && !appMsgInfo.value?.isLast) {
            getList(appMsgInfo.value?.cursor);
        }
    });
};

// 滚动到底部
const scrollToBottom = (): void => {
    nextTick(() => {
        if (appListRef.value) {
            appListRef.value.scrollTo(0, appListRef.value.scrollHeight);
        }
    });
};
</script>
<style lang="scss" scoped>
.app-list{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    height: 100%;
    &-top{
        height: 60px;
        width: 100%;
        z-index: 9;
        background: white;
        border-bottom: var(--border);
        padding: 15px;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        align-items: center;
    }
    &-items{
        height: 100%;
        overflow-y: auto;
        padding: 15px 0;
        flex: 1;
    }
    .item{
        width: 500px;
        margin: 0 auto;
        &-text{
            width: initial;
            margin: 0 20px;
            .item-info{
                width: max-content;
                padding: 10px;
                box-shadow: initial !important;
                background: #e8e8e9;
            }
        }
        &-time{
            text-align: center;
            font-size: 14px;
            margin-bottom: 10px;
            color: #999;
        }
        &-info{
            padding: 15px;
            border-radius: 2px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            row-gap: 10px;
            box-shadow: 0px 3px 10px 4px #f2f1f1;
            img{
                width: 100%;
                height: 130px;
            }
            .name{
                font-size: 20px;
                font-weight: bold;
                text-align: center;
                padding: 5px 0;
            }
            .content{
                font-size: 14px;
                padding: 0;
                line-height: 22px;
            }
            .detail{
                font-size: 15px;
                padding-top: 15px;
                border-top: var(--border);
                color: var(--blue);
            }
        }
        &:not(:last-child){
            margin-bottom: 20px;
        }
    }
}
.back-bottom{
	position: fixed;
	right: 30px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	bottom: 60px;
	background: white;
	border: 1px solid #eee;
	z-index: 99;
	border-radius: 50%;
	cursor: pointer;
	&:hover{
		background: #eee;
	}
}
</style>
